<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

<script src="waiter.js"></script>
<link type="text/css" rel="stylesheet" href="assets/SyntaxHighlighter.css"></link>
<script language="javascript" src="assets/shCore.js"></script>
<script language="javascript" src="assets/shBrushJScript.js"></script>
<style type="text/css">
/* Spearmint tints > http://inspire.server101.com/bttdb/html/tables/ */

/* table */
table {
	margin: 0 0 1em;
	background: #FFF;
	border-collapse: collapse;
	border-top: 1px solid #363;
	border-bottom: 2px solid #363;
}

/* caption = table title/heading */
caption {
	text-align: left;
	font: bold small-caps 120%/1.3 "trebuchet ms",Helvetica,Arial,Sans-Serif;
	color: #363;
	margin: .3em 0;
}

/* reduced font size to save space */
tr { font-size: 90%; }
/* prevent nested tables reducing font size further */
tr tr { font-size: 100%; }

/* tinted rows */
/* in CSS3 selectors: tbody tr:even or tbody tr:nth-child(2n) */
tr.odd {
	background: #DFD;
}

/* table cells */
th, td {
	font-weight: normal;
	padding: .3em .7em;
	text-align: left;
	vertical-align: top;
}

/* borders to separate body sections */
tbody tr:first-child th,
tbody tr:first-child td,
tfoot tr:first-child th,
tfoot tr:first-child td {
	border-top: 1px solid #363;
}

/* tints for column headings */
thead {
	background: #9C9;
	white-space: nowrap;
}

/* tints for totals */
tfoot {
	background: #ADA;
}

/* bold text for totals */
tfoot th,
tfoot td {
	font-weight: bold;
}

.link {
  color:#000;
  text-decoration:none;
}

.link:hover {
    text-decoration:underline
}

</style>
</head>
<body>

<div style="font-size:32px">Ajax Waiter - Properties</div>
<div style="float:right"><a href="index.html" class="link">Home</a></div>
<div style="clear:right;height:3px;background:#9C9;border-bottom:1px solid #000"></div>


<p>The waiter and the spinner which is used by the waiter are configured with a
set of properties. The tables below  shows those properties and their defaults.
</p>

<h2>window.waiter.show properties</h2>

<table style="cell-padding:0;border:1px solid #000">
 <thead>
  <th>Property</th>
  <th>Description</th>
  <th>Default</th> 
 </thead>
 <tbody>
 <tr>
 <td>
   opacity
 </td>
 <td>
   The opacity of the blocker div. This is a number between [0-100].
 </td>
 <td>
   75
 </td>
 </tr>
 <tr class="odd">
 <td>
   background
 </td>
 <td>
  The background color used for the blocker div. The color may vary depending on
  the opacity. This number may be hex or a valid CSS color.
 </td>
 <td>
   #FFF
 </td>
 </tr>
 <tr>
 <td>
   textColor
 </td>
 <td>
  The color of the message text. The color may vary depending on
  the opacity. This number may be hex or a valid CSS color.
 </td>
 <td>
   #000
 </td>
 </tr>
 <tr class="odd">
 <td>
   fontSize
 </td>
 <td>
   The size of the font used for the wait message. The font size need be a 
   valid CSS font size.
 </td>
 <td>
   14px
 </td>
 </tr>
 <tr>
 <td>
   message
 </td>
 <td>
   The intial message for the wait dialog.
 </td>
 <td>
   Please Wait
 </td>
 </tr>
 <tr class="odd">
 <td>
   spinner
 </td>
 <td>
   A subset of properties to customize the spinner
 </td>
 <td>
   {}
 </td>
 </tr>
 </tbody> 
</table>

<h2>window.spinner properties</h2>

<p>
Spinner Properties are provided as an <code>window.waiter.show</code> argument with by the name of
<code>spinner</code> to the window.waiter.show call (e.g.) <code>window.waiter.show({ spinner : { yRadius : 20 }});</code>.
Using these properties you can control the size, animation speed and individual properteis of the spinner.
</p>

<table style="cell-padding:0;border: 1px solid #000">
 <thead>
  <th>Property</th>
  <th>Description</th>
  <th>Default</th> 
 </thead>
 <tbody> 
 <tr>
 <td>
   yRadius
 </td>
 <td>
   The y-axis radius for the spinner.
 </td>
 <td>
   30
 </td>
 </tr>
  <tr class="odd">
 <td>
   xRadius
 </td>
 <td>
   The x-axis radius for the spinner.
 </td>
 <td>
   80
 </td>
 </tr>
   <tr>
 <td>
   centerX
 </td>
 <td>
   The x offset for the center of the spinner.
 </td>
 <td>
   80
 </td>
 </tr>
 
 <tr class="odd">
 <td>
   centerY
 </td>
 <td>
   The y offset for the center of the spinner.
 </td>
 <td>
   50
 </td>
 </tr>
 
  <tr>
 <td>
   maxWidth
 </td>
 <td>
   Maximum size blocks can become.
 </td>
 <td>
   15
 </td>
 </tr>
 
 <tr class="odd">
 <td>
   minWidth
 </td>
 <td>
   Minimum size blocks. This size is added to every block.
 </td>
 <td>
   10
 </td>
 </tr>
 
  <tr>
 <td>
   delay
 </td>
 <td>
   The delay between each frame of the animation. In miliseconds.
 </td>
 <td>
   20
 </td>
 </tr>
 
 <tr class="odd">
 <td>
   increment
 </td>
 <td>
   The number of pixels to skip between each frame of animation.
 </td>
 <td>
   2
 </td>
 </tr>
 
  <tr>
 <td>
   count
 </td>
 <td>
   The number of block in the spinner.
 </td>
 <td>
   9
 </td>
 </tr>
 
 <tr class="odd">
 <td>
   background
 </td>
 <td>
   The background color for the blocks. This is any CSS complaint color.
 </td>
 <td>
   #ABABAB
 </td>
 </tr>
 
 <tr>
 <td>
   backgroundSelected
 </td>
 <td>
   The background color for the highlighted blocks. This is any CSS complaint color.
 </td>
 <td>
   #E6EBFF
 </td>
 </tr>
 
  <tr class="odd">
 <td>
   border
 </td>
 <td>
   The border for the blocks. This is any CSS complaint border.
 </td>
 <td>
   1px solid #000
 </td>
 </tr>
 
   <tr>
 <td>
   offset
 </td>
 <td>
   Additional offset for the animation as a set of properties.
 </td>
 <td>
   { x :0, y : 0}
 </td>
 </tr>
  </tbody>
</table>


<div id="messages"></div>
</div>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'asstets/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>